import { icon } from '../static/img/images/iconPoster.js' // 标题上的星星图标

// 单品海报
function singleGoods(ctx, data, callback) {
  // 画直线方法，
  let moveline = (start, end) => {
    ctx.moveTo(start.x, start.y)
    ctx.lineTo(end.x, end.y)
    ctx.stroke()
  }

  // 添加设置文本的方法
  let setText = (option) => {
    ctx.setFontSize(option.fontSize)
    ctx.setFillStyle(option.color || '#333333')
    ctx.fillText(option.text, option.textX, option.textY)
  }

  ctx.drawImage(data.bgImg, 0, 0, 375, 667)
  ctx.drawImage(icon, 66, 19, 32, 32)

  // 绘制线条用于文字对齐
  ctx.setStrokeStyle('transparent')
  // ctx.setStrokeStyle('red')

  // 绘制位于中间的竖线，用于文本水平对齐
  moveline(
    {
      x: 187,
      y: 0,
    },
    {
      x: 187,
      y: 192,
    }
  )

  // 边距为24的文字对齐竖线
  moveline(
    {
      x: 24,
      y: 0,
    },
    {
      x: 24,
      y: 667,
    }
  )
  moveline(
    {
      x: 351,
      y: 0,
    },
    {
      x: 351,
      y: 667,
    }
  )

  moveline(
    {
      x: 0,
      y: 28,
    },
    {
      x: 375,
      y: 28,
    }
  )
  ctx.setTextBaseline('top')
  setText({
    text: '推荐一款低价车给您，请查收',
    fontSize: 15,
    color: '#333333',
    textX: 109,
    textY: 28,
  })

  ctx.setTextAlign('center')
  setText({
    // text: '大标题最多七字',
    text: data.bigTitle,
    fontSize: 42,
    textX: 187,
    textY: 75,
    color: data.color,
  })
  setText({
    // text: '副标题最多不能超过十二字',
    text: data.smallTitle,
    fontSize: 23,
    color: data.color,
    textX: 187,
    textY: 138,
  })

  // 商品图片
  ctx.drawImage(data.goods.img, 22, 192, 330, 220)
  ctx.setTextAlign('left')
  setText({
    // text: '奥迪 A6L',
    text: data.goods.carBrand,
    fontSize: 23,
    color: '#333333',
    textX: 24,
    textY: 428,
  })
  // let str = '2019款  2.9T 510HPNRING纽博格林限量版'
  let str = data.goods.carType
  const gWidth = ctx.measureText(data.goods.carBrand).width // 车品牌的文本宽度
  let line1TextWidth = 0 //
  let line2TextWidth = 0 //
  let line1Width = 375 - (48 + gWidth) // 计算出车款式在品牌一行需要换行的文本宽度
  let line2Width = 375 - 48 // 计算出车款式第二行需要的文本宽度

  let initHeight = 432 // 绘制字体距离canvas顶部初始的高度
  let lastSubStrIndex = 0 // 每次开始截取的字符串的索引

  // 第一遍循环车品牌后面一小段位置
  for (let i = 0; i < str.length; i++) {
    if (line1TextWidth < line1Width) {
      line1TextWidth += ctx.measureText(str[i]).width
      lastSubStrIndex = i
    }
  }
  setText({
    text: str.substring(0, lastSubStrIndex),
    fontSize: 18,
    color: '#333333',
    textX: 30 + gWidth,
    textY: initHeight,
  })
  initHeight += 30 //20为字体的高度

  // 第二遍循环出第二行显示的
  for (let i = lastSubStrIndex + 1; i < str.length; i++) {
    if (line2TextWidth < line2Width) {
      line2TextWidth += ctx.measureText(str[i]).width
    }
  }
  setText({
    text: str.substr(lastSubStrIndex, str.length - 1),
    fontSize: 18,
    color: '#333333',
    textX: 24,
    textY: initHeight,
  })

  moveline({ x: 24, y: 515 }, { x: 351, y: 515 }) // 价格对齐线
  ctx.setTextBaseline('bottom')
  setText({
    text: '指导价：' + data.goods.guidePrice,
    fontSize: 15,
    color: '#666666',
    textX: 24,
    textY: 515,
  })

  ctx.setTextBaseline('bottom')
  ctx.setTextAlign('right')
  setText({
    // text: '￥28.25万',
    text: '￥' + data.goods.actualPrice,
    fontSize: 26,
    color: '#eb5c02',
    textX: 351,
    textY: 515,
  })

  // moveline({ x: 0, y: 550 }, { x: 375, y: 550 }) // 矩形上边虚线

  // 底部矩形 - 店铺区域
  const grd = ctx.createLinearGradient(0, 0, 200, 0)
  grd.addColorStop(0, '#FFE13D')
  grd.addColorStop(1, '#FDD321')
  ctx.setFillStyle(grd)
  ctx.fillRect(0, 551, 375, 116)

  ctx.drawImage(data.store.headerImg, 24, 573, 66, 66)
  // 竖线
  moveline(
    {
      x: 98,
      y: 573,
    },
    {
      x: 98,
      y: 667,
    }
  )
  // 横线
  moveline(
    {
      x: 98,
      y: 585,
    },
    {
      x: 230,
      y: 585,
    }
  )
  ctx.setTextAlign('left')
  ctx.setTextBaseline('top')
  // 店铺名截取
  let storeName = data.store.storeName
  let snw = ctx.measureText(storeName).width // 店铺名宽度
  let newStoreName = '' // 第一次截取的字
  let twoStoreName = '' // 第二次截取的字
  for (let i = 0; i < storeName.length; i++) {
    let width = ctx.measureText(newStoreName).width
    let twoWidth = ctx.measureText(twoStoreName).width
    if (width < 200) {
      newStoreName += storeName[i]
    } else if (twoWidth < 200) {
      twoStoreName += storeName[i]
    } else {
      twoStoreName = twoStoreName.slice(0, -1) + '...'
      break
    }
  }
  if (twoStoreName) {
    setText({
      // text: '达州森垚奔驰4S',
      text: newStoreName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 571,
    })

    setText({
      // text: '达州森垚奔驰4S',
      text: twoStoreName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 594,
    })

    setText({
      text: '长按识别 进店优惠',
      fontSize: 15,
      color: '#656565',
      textX: 98,
      textY: 622,
    })
  } else {
    setText({
      // text: '达州森垚奔驰4S',
      text: storeName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 585,
    })
    setText({
      text: '长按识别 进店优惠',
      fontSize: 15,
      color: '#656565',
      textX: 98,
      textY: 613,
    })
  }

  ctx.drawImage(data.store.qrcode, 277, 571, 78, 78)

  setTimeout(function () {
    //必须延迟执行 不然H5不显示
    ctx.draw()
    callback()
  }, 200)
}

// 多商品海报
function multipleGoods(ctx, data, callback) {
  let goodsList = data.goods

  // 画直线方法，
  let moveline = (start, end) => {
    ctx.moveTo(start.x, start.y)
    ctx.lineTo(end.x, end.y)
    ctx.stroke()
  }

  // 添加设置文本的方法
  let setText = (option) => {
    ctx.setFontSize(option.fontSize)
    ctx.setFillStyle(option.color || '#333333')
    ctx.fillText(option.text, option.textX, option.textY)
  }

  ctx.drawImage(data.bgImg, 0, 0, 375, 667)
  ctx.drawImage(icon, 66, 10, 32, 32)

  // 绘制线条用于文字对齐
  ctx.setStrokeStyle('transparent')
  // ctx.setStrokeStyle('red')

  // 绘制位于中间的竖线，用于文本水平对齐
  moveline({ x: 187, y: 0 }, { x: 187, y: 667 })

  // 边距为24的文字对齐竖线
  moveline({ x: 24, y: 0 }, { x: 24, y: 667 })
  moveline({ x: 351, y: 0 }, { x: 351, y: 667 })

  moveline({ x: 0, y: 16 }, { x: 375, y: 16 })
  ctx.setTextBaseline('top')
  setText({
    text: '推荐一款低价车给您，请查收',
    fontSize: 15,
    color: '#333333',
    textX: 109,
    textY: 16,
  })

  ctx.setTextAlign('center')
  setText({
    // text: '大标题最多七字',
    text: data.bigTitle,
    fontSize: 42,
    textX: 187,
    textY: 60,
    color: data.color,
  })

  /*
   * 中间的商品区域,商品最多3个
   * goodsY是根据商品数量进行y位置的定位
   */
  const goodsBgY = new Map([
    [1, 240],
    [2, 180],
    [3, 120],
  ]).get(goodsList.length)
  // 根据商品数量遍历出对应的位置
  const _for = (cb) => {
    for (let i = 0; i < goodsList.length; i++) {
      let is2 = goodsList.length === 2 ? 60 : 0 // 如果只有2个商品就+60

      let y = i === 0 ? goodsBgY : goodsBgY * (i + 1) - is2

      cb(y, i)
    }
  }
  // 背景矩形
  const bgRectImg =
    ''
  ctx.drawImage(bgRectImg, 24, goodsBgY, 327, 120 * goodsList.length)
  // _for((y) => {
  //   ctx.rect(24, y, 327, 120)
  //   ctx.setFillStyle('#ffffff')
  //   ctx.fill()
  // })

  _for((y, i) => {
    let goodsY = y + 20

    // 商品图片
    ctx.drawImage(goodsList[i].img, 35, goodsY, 116, 77)

    // 商品信息
    moveline({ x: 158, y: goodsY }, { x: 158, y: goodsY + 78 })
    moveline({ x: 158, y: goodsY }, { x: 350, y: goodsY })
    ctx.setTextAlign('left') // 根据线对齐
    ctx.setTextBaseline('top')
    setText({
      // text: '推荐一款低价车给您，请查收',
      text: goodsList[i].carBrand,
      fontSize: 18,
      color: '#333333',
      textX: 158,
      textY: goodsY,
    })

    /*
     * 循环字符串换行
     *
     */

    // let str = '2019款  2.9T 510HPNRING纽博格林限量版'
    let str = goodsList[i].carType
    const gWidth = ctx.measureText(goodsList[i].carBrand).width // 车品牌的文本宽度
    let line1TextWidth = 0 //
    let line2TextWidth = 0 //
    let line1Width = 375 - (158 + 48 + gWidth) // 计算出车款式在品牌一行需要换行的文本宽度
    let line2Width = 375 - (158 + 48) // 计算出车款式第二行需要的文本宽度

    let initHeight = goodsY // 绘制字体距离canvas顶部初始的高度
    let lastSubStrIndex = 0 // 每次开始截取的字符串的索引

    // 第一遍循环车品牌后面一小段位置
    for (let i = 0; i < str.length; i++) {
      if (line1TextWidth < line1Width) {
        line1TextWidth += ctx.measureText(str[i]).width
        lastSubStrIndex = i
      }
    }
    setText({
      text: str.substring(0, lastSubStrIndex),
      fontSize: 18,
      color: '#333333',
      textX: 158 + 24 + gWidth,
      textY: initHeight,
    })
    initHeight += 24 //20为字体的高度

    // 第二遍循环出第二行显示的
    let goodsStr2 = str[lastSubStrIndex] //第二行商品名称内容
    for (let i = lastSubStrIndex + 1; i < str.length; i++) {
      if (line2TextWidth < line2Width) {
        line2TextWidth += ctx.measureText(str[i]).width
        goodsStr2 += str[i]
      } else {
        goodsStr2 = goodsStr2.slice(0, -1) + '...'
        break
      }
    }
    setText({
      text: goodsStr2,
      fontSize: 18,
      color: '#333333',
      textX: 158,
      textY: initHeight,
    })

    /*
     * 循环字符串换行
     *
     */

    // 价格对齐线
    moveline({ x: 158, y: goodsY + 74 }, { x: 350, y: goodsY + 74 })
    ctx.setTextBaseline('bottom')
    setText({
      text: '指导价：' + goodsList[i].guidePrice,
      fontSize: 12,
      color: '#999999',
      textX: 158,
      textY: goodsY + 74,
    })
    setText({
      text: '￥' + goodsList[i].actualPrice,
      fontSize: 16,
      color: '#FAAF00',
      textX: 269,
      textY: goodsY + 74,
    })
  })

  ctx.setTextAlign('center') // 根据线对齐
  moveline({ x: 0, y: 500 }, { x: 375, y: 500 })
  ctx.setTextBaseline('top')
  setText({
    // text: '副标题最多不能超过十二字',
    text: data.smallTitle,
    fontSize: 23,
    color: data.color,
    textX: 187,
    textY: 500,
  })

  // 底部矩形 - 店铺区域
  const grd = ctx.createLinearGradient(0, 0, 200, 0)
  grd.addColorStop(0, '#FFE13D')
  grd.addColorStop(1, '#FDD321')
  ctx.setFillStyle(grd)
  ctx.fillRect(0, 551, 375, 116)

  ctx.drawImage(data.store.headerImg, 24, 573, 66, 66)
  ctx.setTextAlign('left')
  moveline({ x: 98, y: 573 }, { x: 98, y: 667 }) // 矩形上边虚线

  // 店铺名截取
  let storeName = data.store.storeName
  let snw = ctx.measureText(storeName).width // 店铺名宽度
  let newStoreName = '' // 第一次截取的字
  let twoStoreName = '' // 第二次截取的字
  for (let i = 0; i < storeName.length; i++) {
    let width = ctx.measureText(newStoreName).width
    let twoWidth = ctx.measureText(twoStoreName).width
    if (width < 175) {
      newStoreName += storeName[i]
    } else if (twoWidth < 175) {
      twoStoreName += storeName[i]
    } else {
      twoStoreName = twoStoreName.slice(0, -1) + '...'
      break
    }
  }
  if (twoStoreName) {
    setText({
      // text: '达州森垚奔驰4S',
      text: newStoreName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 571,
    })
    setText({
      // text: '达州森垚奔驰4S',
      text: twoStoreName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 594,
    })
    setText({
      text: '长按识别 进店优惠',
      fontSize: 15,
      color: '#656565',
      textX: 98,
      textY: 622,
    })
  } else {
    setText({
      // text: '达州森垚奔驰4S',
      text: storeName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 586,
    })
    setText({
      text: '长按识别 进店优惠',
      fontSize: 15,
      color: '#656565',
      textX: 98,
      textY: 613,
    })
  }

  ctx.drawImage(data.store.qrcode, 277, 571, 78, 78)

  setTimeout(function () {
    //必须延迟执行 不然H5不显示
    ctx.draw()
    callback()
  }, 200)
}

// 店铺海报
function store(ctx, data, callback) {
  // 画直线方法，
  let moveline = (start, end) => {
    ctx.moveTo(start.x, start.y)
    ctx.lineTo(end.x, end.y)
    ctx.stroke()
  }

  // 添加设置文本的方法
  let setText = (option) => {
    ctx.setFontSize(option.fontSize)
    ctx.setFillStyle(option.color || '#333333')
    ctx.fillText(option.text, option.textX, option.textY)
  }

  ctx.drawImage(data.bgImg, 0, 0, 375, 667)

  // 绘制线条用于文字对齐
  ctx.setStrokeStyle('transparent')
  // ctx.setStrokeStyle('red')

  // 绘制位于中间的竖线，用于文本水平对齐
  moveline({ x: 187, y: 0 }, { x: 187, y: 667 })

  // 边距为24的文字对齐竖线
  moveline({ x: 24, y: 0 }, { x: 24, y: 667 })
  moveline({ x: 351, y: 0 }, { x: 351, y: 667 })

  moveline({ x: 0, y: 80 }, { x: 375, y: 80 })
  ctx.setTextAlign('center')
  ctx.setTextBaseline('top')
  setText({
    // text: '大标题最多七字',
    text: data.bigTitle,
    fontSize: 42,
    color: data.color,
    textX: 187,
    textY: 80,
  })

  // moveline({ x: 0, y: 80 }, { x: 375, y: 80 })
  ctx.setTextAlign('center') // 根据线对齐
  setText({
    // text: '副标题最多不能超过十二字',
    text: data.smallTitle1,
    fontSize: 23,
    color: data.color,
    textX: 187,
    textY: 137,
  })

  // 中间图片
  ctx.drawImage(data.img, 22, 205, 330, 220)

  ctx.setTextAlign('center') // 根据线对齐
  moveline({ x: 0, y: 456 }, { x: 375, y: 456 })
  ctx.setTextBaseline('top')
  setText({
    // text: '副标题最多不能超过十四字',
    text: data.smallTitle2,
    fontSize: 23,
    color: data.color,
    textX: 187,
    textY: 456,
  })

  // 底部矩形 - 店铺区域
  const grd = ctx.createLinearGradient(0, 0, 200, 0)
  grd.addColorStop(0, '#FFE13D')
  grd.addColorStop(1, '#FDD321')
  ctx.setFillStyle(grd)
  ctx.fillRect(0, 551, 375, 116)

  ctx.drawImage(data.store.headerImg, 24, 573, 66, 66)
  ctx.setTextAlign('left')
  moveline({ x: 98, y: 573 }, { x: 98, y: 667 }) // 矩形上边虚线

  // 店铺名截取
  let storeName = data.store.storeName
  let snw = ctx.measureText(storeName).width // 店铺名宽度
  let newStoreName = '' // 第一次截取的字
  let twoStoreName = '' // 第二次截取的字
  for (let i = 0; i < storeName.length; i++) {
    let width = ctx.measureText(newStoreName).width
    let twoWidth = ctx.measureText(twoStoreName).width
    if (width < 175) {
      newStoreName += storeName[i]
    } else if (twoWidth < 175) {
      twoStoreName += storeName[i]
    } else {
      twoStoreName = twoStoreName.slice(0, -1) + '...'
      break
    }
  }
  if (twoStoreName) {
    setText({
      // text: '达州森垚奔驰4S',
      text: newStoreName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 571,
    })
    setText({
      // text: '达州森垚奔驰4S',
      text: twoStoreName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 594,
    })
    setText({
      text: '长按识别 进店优惠',
      fontSize: 15,
      color: '#656565',
      textX: 98,
      textY: 622,
    })
  } else {
    setText({
      // text: '达州森垚奔驰4S',
      text: storeName,
      fontSize: 18,
      color: '#333333',
      textX: 98,
      textY: 586,
    })
    setText({
      text: '长按识别 进店优惠',
      fontSize: 15,
      color: '#656565',
      textX: 98,
      textY: 613,
    })
  }
  ctx.drawImage(data.store.qrcode, 277, 571, 78, 78)

  setTimeout(function () {
    //必须延迟执行 不然H5不显示
    ctx.draw()
    callback()
  }, 200)
}

// 店铺海报 - 其他不用编辑的几张图
function storeOther(ctx, data, callback) {
  // 画直线方法，
  let moveline = (start, end) => {
    ctx.moveTo(start.x, start.y)
    ctx.lineTo(end.x, end.y)
    ctx.stroke()
  }

  // 添加设置文本的方法
  let setText = (option) => {
    ctx.setFontSize(option.fontSize)
    ctx.setFillStyle(option.color || '#333333')
    ctx.fillText(option.text, option.textX, option.textY)
  }

  // 背景图
  ctx.drawImage(data.bgImg, 0, 0, 375, 667)

  // 绘制线条用于文字对齐
  ctx.setStrokeStyle('transparent')
  // ctx.setStrokeStyle('red')

  // 二维码图
  ctx.drawImage(data.qrcode, 137, 490, 100, 100)

  moveline({ x: 187, y: 0 }, { x: 187, y: 667 })
  moveline({ x: 0, y: 600 }, { x: 375, y: 600 })
  ctx.setTextAlign('center')
  ctx.setTextBaseline('top')
  setText({
    // text: '扫码提升我俩的缘分',
    text: data.text,
    fontSize: 14,
    color: '#666666',
    textX: 187,
    textY: 600,
  })

  setTimeout(function () {
    //必须延迟执行 不然H5不显示
    ctx.draw()
    callback()
  }, 200)
}

let typeMap = new Map([
  ['singleGoods', singleGoods],
  ['multipleGoods', multipleGoods],
  ['store', store],
  ['storeOther', storeOther],
])

// 绘制海报
export function draw(option, callback = () => {}) {
  // 获取海报方法并调用，参数为canvas实例和海报上的数据
  typeMap.get(option.type)(option.canvas, option.data, callback)
}

// 生成海报图片
export function create(canvasId, callback) {
  uni.canvasToTempFilePath({
    width: 375,
    height: 667,
    destWidth: 750,
    destHeight: 1334,
    canvasId: canvasId,
    success: (res) => {
      console.log('保存成功', res)
      callback(res)
    },
    fail: (err) => {
      uni.showToast({
        title: '生成失败' + err,
        duration: 2000,
      })
      console.log('err保存失败', err)
    },
  })
}
